<template>
  <div class="zone-layout" style="margin-bottom:0.15rem;">
    <div class="zone-top-layout">
      <div class="zone-top-title">{{articlechannel.name}}</div>
      <div @click="sendSkipToArticleChannel(articlechannel.id)" class="zone-top-more">更多</div>
    </div>
    <div @click="sendSkipToArticle(articlechannel.article_list.articles[0].id)" class="zone-head-layout">
      <img class="zone-head-img" :src="articlechannel.article_list.articles[0].cover_image"/>
      <div class="zone-head-shadow"></div>
      <div class="zone-head-bottom-show">
        <div class="zone-head-title">{{articlechannel.article_list.articles[0].title}}</div>
        <div class="mw-row-spacebetween-style" style="align-items: center;margin-top:0.04rem;">
          <div class="mw-row-style" style="align-items: center">
            <img class="mw-avatar-style" :src="articlechannel.article_list.articles[0].user.avatar"
                 style="height:0.2rem;width:0.2rem;border-radius: 50%;object-fit:cover;"/>
            <div class="mw-single-line mw-main-white" style="font-size: 0.11rem;width:2rem;margin-left: 0.04rem;">
              {{articlechannel.article_list.articles[0].user.name}}
            </div>
          </div>
          <div class="mw-row-style" style="align-items: center">
            <img src="/static/read_eye.png" style="height:0.12rem;width:0.12rem;object-fit:cover;"/>
            <div class="mw-main-white" style="font-size: 0.11rem;margin-left: 0.04rem;">
              {{articlechannel.article_list.articles[0].views_total}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="position: relative;background-color: #ffffff;border-radius:0 0 0.08rem 0.08rem;">
      <div class="mw-column-style"
           style="border-radius:0 0 0.08rem 0.08rem;width:3.25rem;padding:0.1rem;background-color: #ffffff">
        <div class="mw-row-spacebetween-style" style="margin-bottom:0.09rem;">
          <div @click="sendSkipToArticle(articlechannel.article_list.articles[1].id)"
               style="margin-right:0.09rem;width:1.58rem;border-radius: 0.04rem;">
            <div style="position: relative;width:1.58rem;height:0.79rem;border-radius: 0.04rem 0.04rem 0 0">
              <img :src="articlechannel.article_list.articles[1].cover_image"
                   style="position:absolute;left:0;top:0;width:1.58rem;height:100%;object-fit:cover;border-radius: 0.04rem 0.04rem 0 0"/>
              <div class="mw-row-style"
                   style="align-items:center;padding:0 0.04rem 0 0.04rem;position:absolute;left:0.04rem;bottom:0.05rem;height:0.14rem;background-color:rgba(0,0,0,0.3);border-radius: 0.04rem;">
                <img src="/static/read_eye_gray.png"
                     style="margin-right:0.04rem;height:0.1rem;width:0.1rem;object-fit:cover;"/>
                <div class="mw-main-white" style="font-size: 0.09rem;">
                  {{articlechannel.article_list.articles[1].views_total}}
                </div>
              </div>
            </div>
            <div class="mw-column-style" style="padding:0.08rem;width:1.4rem;border:0.01rem solid rgba(222,222,222,1);border-top-color: rgba(255,255,255,0)">
              <div class="mw-n-line mw-first-text-color "
                   style="height:0.36rem;font-size:0.13rem;width: 100%;line-height: 0.18rem;margin-bottom:0.06rem;">
                {{articlechannel.article_list.articles[1].title}}
              </div>
              <div class="mw-row-style" style="align-items: center">
                <img class="mw-avatar-style" :src="articlechannel.article_list.articles[1].user.avatar"
                     style="height:0.2rem;width:0.2rem;border-radius: 50%;object-fit:cover;"/>
                <div class="mw-single-line mw-third-text-color"
                     style="margin-left:0.04rem;font-size: 0.11rem;width:1rem;">
                  {{articlechannel.article_list.articles[1].user.name}}
                </div>
              </div>
            </div>
          </div>
          <div @click="sendSkipToArticle(articlechannel.article_list.articles[2].id)"
               style="width:1.58rem;border-radius: 0.04rem;">
            <div style="position: relative;width:1.58rem;height:0.79rem;border-radius: 0.04rem 0.04rem 0 0">
              <img :src="articlechannel.article_list.articles[2].cover_image"
                   style="position:absolute;left:0;top:0;width:1.58rem;height:100%;object-fit:cover;border-radius: 0.04rem 0.04rem 0 0"/>
              <div class="mw-row-style"
                   style="align-items:center;padding:0 0.04rem 0 0.04rem;position:absolute;left:0.04rem;bottom:0.05rem;height:0.14rem;background-color:rgba(0,0,0,0.3);border-radius: 0.04rem;">
                <img src="/static/read_eye_gray.png"
                     style="margin-right:0.04rem;height:0.1rem;width:0.1rem;object-fit:cover;"/>
                <div class="mw-main-white" style="font-size: 0.09rem;">
                  {{articlechannel.article_list.articles[2].views_total}}
                </div>
              </div>
            </div>
            <div class="mw-column-style" style="padding:0.08rem;width:1.4rem;border:0.01rem solid rgba(222,222,222,1);border-top-color: rgba(255,255,255,0)">
              <div class="mw-n-line mw-first-text-color "
                   style="height:0.36rem;font-size:0.13rem;width: 100%;line-height: 0.18rem;margin-bottom:0.06rem;">
                {{articlechannel.article_list.articles[2].title}}
              </div>
              <div class="mw-row-style" style="align-items: center;justify-content: flex-end">
                <div class="mw-single-line mw-third-text-color" style="font-size: 0.11rem;">
                  {{articlechannel.article_list.articles[2].user.name}}
                </div>
                <img class="mw-avatar-style" :src="articlechannel.article_list.articles[2].user.avatar"
                     style="height:0.2rem;width:0.2rem;border-radius: 50%;object-fit:cover;margin-left:0.04rem;"/>
              </div>
            </div>
          </div>
        </div>
        <div class="mw-row-spacebetween-style">
          <div @click="sendSkipToArticle(articlechannel.article_list.articles[3].id)"
               style="margin-right:0.09rem;width:1.58rem;border-radius: 0.04rem;">
            <div style="position: relative;width:1.58rem;height:0.79rem;border-radius: 0.04rem 0.04rem 0 0">
              <img :src="articlechannel.article_list.articles[3].cover_image"
                   style="position:absolute;left:0;top:0;width:1.58rem;height:100%;object-fit:cover;border-radius: 0.04rem 0.04rem 0 0"/>
              <div class="mw-row-style"
                   style="align-items:center;padding:0 0.04rem 0 0.04rem;position:absolute;left:0.04rem;bottom:0.05rem;height:0.14rem;background-color:rgba(0,0,0,0.3);border-radius: 0.04rem;">
                <img src="/static/read_eye_gray.png"
                     style="margin-right:0.04rem;height:0.1rem;width:0.1rem;object-fit:cover;"/>
                <div class="mw-main-white" style="font-size: 0.09rem;">
                  {{articlechannel.article_list.articles[3].views_total}}
                </div>
              </div>
            </div>
            <div class="mw-column-style" style="padding:0.08rem;width:1.4rem;border:0.01rem solid rgba(222,222,222,1);border-top-color: rgba(255,255,255,0)">
              <div class="mw-n-line mw-first-text-color "
                   style="height:0.36rem;font-size:0.13rem;width: 100%;line-height: 0.18rem;margin-bottom:0.06rem;">
                {{articlechannel.article_list.articles[3].title}}
              </div>
              <div class="mw-row-style" style="align-items: center">
                <img class="mw-avatar-style" :src="articlechannel.article_list.articles[3].user.avatar"
                     style="height:0.2rem;width:0.2rem;border-radius: 50%;object-fit:cover;"/>
                <div class="mw-single-line mw-third-text-color"
                     style="margin-left:0.04rem;font-size: 0.11rem;width:1rem;">
                  {{articlechannel.article_list.articles[3].user.name}}
                </div>
              </div>
            </div>
          </div>
          <div @click="sendSkipToArticle(articlechannel.article_list.articles[4].id)"
               style="width:1.58rem;border-radius: 0.04rem;">
            <div style="position: relative;width:1.58rem;height:0.79rem;border-radius: 0.04rem 0.04rem 0 0">
              <img :src="articlechannel.article_list.articles[4].cover_image"
                   style="position:absolute;left:0;top:0;width:1.58rem;height:100%;object-fit:cover;border-radius: 0.04rem 0.04rem 0 0"/>
              <div class="mw-row-style"
                   style="align-items:center;padding:0 0.04rem 0 0.04rem;position:absolute;left:0.04rem;bottom:0.05rem;height:0.14rem;background-color:rgba(0,0,0,0.3);border-radius: 0.04rem;">
                <img src="/static/read_eye_gray.png"
                     style="margin-right:0.04rem;height:0.1rem;width:0.1rem;object-fit:cover;"/>
                <div class="mw-main-white" style="font-size: 0.09rem;">
                  {{articlechannel.article_list.articles[4].views_total}}
                </div>
              </div>
            </div>
            <div class="mw-column-style" style="padding:0.08rem;width:1.4rem;border:0.01rem solid rgba(222,222,222,1);border-top-color: rgba(255,255,255,0)">
              <div class="mw-n-line mw-first-text-color "
                   style="height:0.36rem;font-size:0.13rem;width: 100%;line-height: 0.18rem;margin-bottom:0.06rem;">
                {{articlechannel.article_list.articles[4].title}}
              </div>
              <div class="mw-row-style" style="align-items: center;justify-content: flex-end">
                <div class="mw-single-line mw-third-text-color" style="font-size: 0.11rem;">
                  {{articlechannel.article_list.articles[4].user.name}}
                </div>
                <img class="mw-avatar-style" :src="articlechannel.article_list.articles[4].user.avatar"
                     style="height:0.2rem;width:0.2rem;border-radius: 50%;object-fit:cover;margin-left:0.04rem;"/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div @click="sendSkipToArticleChannel(articlechannel.id)"
        style="width:0.56rem;height:0.56rem;border-radius:0.28rem;border:0.01rem solid rgba(222,222,222,1);position: absolute;left:1.44rem;top:1.44rem;background-color: #ffffff">
        <div class="mw-first-text-color"
             style="line-height:0.4rem;font-size:0.11rem;margin-left:0.08rem;margin-top:0.08rem;background-color: #F5F5F5;width:0.4rem;height:0.4rem;border-radius: 0.2rem;align-items: center;text-align: center">
          更多
        </div>
      </div>
    </div>

  </div>

</template>
<script>
  import utils from '../utils'
  import httputil from '../httputil'

  export default {
    props: ['articlechannel'],
    data() {
      return {}
    },
    computed: {},
    methods: {
      sendSkipToArticle(item) {
        this.$emit('receiveSkipToArticle', item)
      },
      sendSkipToArticleChannel(item) {
        this.$emit('receiveSkipToArticleChannel', item)
      }
    }
  }

</script>
<style>

</style>
